<template>
  <div class="creat-wrapper">
    <el-form :model="ruleForm" :rules="rulesList" ref="ruleForm" label-width="150px" class="creat-wrapper_form">
      <el-form-item v-for="(item, index) in formInfo"
                    :ref='item.ref'
                    :key="index" :label="item.localIndex ? (item.label + item.localIndex) : item.label" 
                    :prop="item.prop" 
                    :class="(index ===0 || (item.add && item.localIndex === 1)) && ishow ? 'mt60' : ''" :required="isHaveTo">
        <div class="part" v-if="(index ===0 || (item.add && item.localIndex == 1)) && ishow">{{index ===0 && '基本信息' || (item.add && item.localIndex == 1) && '打款人信息'}}</div>
        <el-input v-if="item.type === 'input'" 
                  :type="item.inputType"  
                  v-model="ruleForm[item.prop]" 
                  :disabled="isEditPage && item.isDisable"></el-input>
        <el-radio-group v-if="item.type === 'radio'" v-model="ruleForm[item.prop]">
          <el-radio v-for="(op, opIndex) in item.radioOptions" :key="opIndex" :label="op.label">{{op.name}}</el-radio>
        </el-radio-group>
        <el-select v-if="item.type === 'select'"
                   v-model="ruleForm[item.propName]"
                   value-key="id" 
                   :placeholder="'请选择' + item.name"
                   @change="(val) => onChangeSelect(val, {code: item.prop, name: item.propName, valueName: item.optionLabel, valueCode: item.optionValue})">
          <el-option v-for="county in countylist[item.prop]"
                       :label="county[item.optionLabel]"
                       :key="county[item.optionLabel]"
                       :value="county"></el-option>
        </el-select>
        <div v-if="item.type === 'selectProvince' && item.child">
          <span class="m-r-10">
            <el-select v-model="provinceName" placeholder="省" @change="onChangeProvince" style="width: 160px;">
              <el-option v-for="(province, indexPro) in provinceList.province" :key="indexPro" :label="province" :value="indexPro">
              </el-option>
            </el-select>
            <el-select v-model="cityName" placeholder="市" @change="onChangeCity" style="width: 160px;">
              <el-option v-for="(city, indexCity) in cityList" :key="indexCity" :label="city" :value="indexCity">
              </el-option>
            </el-select>
            <el-select v-model="countyName" placeholder="区县" @change="onChangeCounty" style="width: 160px;">
              <el-option v-for="(count, indexCounty) in countryList" :key="indexCounty" :label="count" :value="indexCounty">
              </el-option>
            </el-select>
          </span>
        </div>
        <el-switch v-if="item.type === 'switch'" v-model="ruleForm[item.prop]"></el-switch>
        <div v-if="item.type === 'remit'" class="remit_part">
          <el-input v-model="ruleForm[item.prop]"></el-input><span v-if="item.add" class="el-icon-circle-plus-outline add_btn" @click="onAdd"></span>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onConfirm('ruleForm')">确认</el-button>
        <el-button @click="onCancel('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import {cloneDeep} from 'lodash'
import threeData from './data.json'
export default {
  name: 'form-marker',
  props: {
    isEdit: Boolean,
    formData: {
      type: Array
    },
    rulesList: {
      type: Object
    },
    isShowTitle: {
      type: Boolean
    },
    selectList: {
      type: Object
    },
    eidtList: {
      type: Object
    }
  },
  data () {
    return {
      formInfo: this.formData,
      ishow: this.isShowTitle,
      // ruleForm: this.eidtList,
      // countylist: this.selectList,
      count: 1,
      provinceList: {},
      cityList: null,
      countryList: null,
      provinceName: null,
      cityName: null,
      countyName: null
    }
  },
  computed: {
    isEditPage: function () {
      return this.isEdit
    },
    countylist: {
      get () {
        return this.selectList
      },
      set (val) {
        this.selectList = val
      }
    },
    ruleForm: {
      get () {
        this.provinceName = this.eidtList.provinceName && this.eidtList.provinceName
        this.cityName = this.eidtList.cityName && this.eidtList.cityName
        this.countyName = this.eidtList.countyName && this.eidtList.countyName
        return this.eidtList
      }
    },
    isHaveTo: function () {
      return this.ruleForm && this.ruleForm.productClass && this.ruleForm.productClass === '小分类'
    }
  },
  watch: {
    formData: function (currentValue) {
      this.formInfo = currentValue
    }
  },
  mounted () {
    this.provinceList = threeData
  },
  methods: {
    onChangeSelect (val, params) {
      this.ruleForm[params.code] = val[params.valueCode]
      this.ruleForm[params.name] = val[params.valueName]
      if (params.name === 'productClass') { // 商品分类存在类别，上级区域必填及联
        this.$emit('change-rule', {isHaveTo: this.isHaveTo, parentCode: this.ruleForm.parentCode, productClass: this.ruleForm.productClass})
        this.$refs['parentCategory'][0].clearValidate()
      }
    },
    onChangeProvince (val) {
      // console.log('onChangeProvince', val)
      this.cityList = this.provinceList[val]
      this.provinceName = this.provinceList.province[val]
      this.ruleForm.provinceName = this.provinceName
      this.ruleForm.provinceNo = val
      this.cityName = null
      this.ruleForm.cityNo = null
      this.countyName = null
      this.ruleForm.countyNo = null
    },
    onChangeCity (val) {
      // console.log('onChangeCity', val)
      this.countryList = this.provinceList[val]
      this.cityName = this.cityList[val]
      this.ruleForm.cityName = this.cityName
      this.ruleForm.cityNo = val
      this.countyName = null
      this.ruleForm.countyNo = null
    },
    onChangeCounty (val) {
      // console.log('onChangeCounty 111', val)
      this.countyName = this.countryList[val]
      this.ruleForm.countyNo = val
      this.ruleForm.countyName = this.countyName
      this.$emit('on-address', {provinceName: this.ruleForm.provinceName, cityName: this.ruleForm.cityName, countyName: this.ruleForm.countyName})
    },
    onSave () {
      this.$emit('on-confirm', this.ruleForm)
    },
    onConfirm (formName) { // 确认
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.onSave()
        } else {
          return false
        }
      })
    },
    onCancel () { // 取消
      this.$emit('on-cancel')
    },
    onAdd () {
      if (this.count < 3) {
        this.count ++
      } else {
        return
      }
      let name = {type: 'remit', label: '常用打款人', prop: 'accontName' + this.count, add: true, localIndex: this.count}
      let bank = {type: 'remit', label: '开户银行', prop: 'bank' + this.count, localIndex: this.count}
      let account = {type: 'remit', label: '银行账户', prop: 'account' + this.count, localIndex: this.count}
      this.formInfo = this.formInfo.concat(name, bank, account)
    }
  }
}
</script>
<style lang="scss" scoped>
.creat-wrapper{
  background: white;
  padding: 10px 0;
  &_base{
    margin-left: 30px;
    border-left: 5px #409EFF solid;
  }
  &_form{
    padding: 20px 250px;
    .mt60{
      margin-top: 60px;
    }
    .part{
      position: absolute;
      left: -360px;
      top: -60px;
      border-left: 5px #409EFF solid;
      font-size: 16px;
    }
  }
  .remit_part{
    position: relative;
    .add_btn{
      position: absolute;
      right: -35px;
      top: 10%;
      font-size: 30px;
      color: #409EFF;
    }
  }
}
</style>